<template>
  <div>
    <div class="hearder-search">
      <div class="toplineBox mb-10">
        <div class="toplineBox-left">
          <el-button size="small" @click="classId=0,jointclassVisible=true" type="primary"><i class="el-icon-plus"></i>添加合班</el-button>
        </div>
        <p class="numberline toplineBox-right">总{{ page.total }}条</p>
      </div>
    </div>
    <div class="table-body">
      <div class="table-body-box">
        <el-table
            ref="multipleTable"
            :data="arryList"
            :stripe="tableStyle.tableStripe"
            :border="tableStyle.tableBorder"
            tooltip-effect="dark"
            style="width: 100%"
            header-cell-class-name="table-text-c"
            cell-class-name="table-text-c">
          <el-table-column
              prop="id"
              label="ID"
              width="80">
          </el-table-column>
          <el-table-column
              prop="section_id"
              label="合班班级">
            <template slot-scope="scope">
              <el-tag
                  :disable-transitions="false"
                  class="mr-10"
                  v-for="items in scope.row.class_ids"
                  :key="items.id"
              >{{ items.class_name }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
              prop="remark"
              label="备注">
          </el-table-column>
          <el-table-column
              label="操作"
              width="80">
            <template slot-scope="scope">
              <el-button size="small" @click="detelTearch(scope.row.id)" type="danger" plain>删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <addJointClass :visible.sync="jointclassVisible" @InitFn="InitFn"></addJointClass>
  </div>
</template>

<script>
import addJointClass from './add-joint-class'
import {pagination, tableoption} from '@/utils/util.js'
import api from '@/utils/api.js'
import {classJoinIndex, classJoinDelete} from '@/api/admin/class'
export default {
  components: {
    addJointClass
  },
  data() {
    return {
      jointclassVisible: false,
      arryList: [], // 页面数据列表
      // 设置table样式
      tableStyle: tableoption,
      // 设置table页面分页所需
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      }
    }
  },
  created() {
    this.InitFn()
  },
  methods: {
    // 初始化
    InitFn() {
      classJoinIndex({p:this.page.pageindex }).then(res=>{
        console.log(res)
        if (!res.code) {
          this.arryList = res.list.data
          this.page.total = res.list.total
        }
      })
    },
    gotoQrcode(option) {
      this.classoption = JSON.parse(JSON.stringify(option))
      this.qrcodeVisible = true
    },
    checkIdCard(option) {
      this.editId = option || ''
      this.addclassVisible = true
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageindex = val
      this.InitFn()
    },
    // 刷新页面
    refreshFn() {
      this.page.pageindex = 1
      this.InitFn()
    },
    gotoDetail(id) {
      let editId = id || ''
      this.$router.push('classDetail?editId=' + editId)
    },
    detelTearch(id) {
      this.$confirm('确认永久删除合班信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.detelRespon(id)
      }).catch(() => {
      })
    },
    detelRespon(id) {
      classJoinDelete({id: id}).then((response) => {
        if (response.code === 0) {
          this.InitFn()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        } else {
        }
      })
      // this.$post(api.admin_classes_detel, data_).then((response) => {
      //   if (response.code === 0) {
      //     this.InitFn()
      //     this.$message({
      //       type: 'success',
      //       message: '删除成功!'
      //     })
      //   } else {
      //   }
      // }).catch((err) => {
      //   console.log(err)
      // })
    }
  },
  // 缓存机制end
  mounted() {
  }
}
</script>
